/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, TextArea, Input, InputDatalist, InputIdProvider,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps,  useItemInputControl,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import { objNestSet} from "../../../common/tool";
import {Dispatch, SetStateAction} from "react";

//常见模型：承压类的宏观检查 {特别的配置 } ，后的第三个字段标识：是否标题也是手工录入的？
//【特殊】 监检类别 当作 ”单位“栏目u:''对应的。
export const items工作内容 = [['安制度', {t: '安全管理制度', pr: '安全管理', span: 5, },],
    ['设计资', {t: '设计、制造、安装、改造、维修等资料',  },],
    ['登记证', {t: '《使用登记表》、《使用登记证》', },],
    ['保养录', {t: '日常维护保养、运行、定期安全检查记录', }, ],
    ['问题处', {t: '年度检查、定期检验报告及问题处理情况',}, ],
    ['仪表校', {t: '安全附件及仪表校验（检定）、修理和更换记录', pr: '安全管理', span: 5,}, ],
    ['应急案', {t: '压力容器事故应急预案', }],
    ['急演练', {t: '压力容器事故应急演练记录', }, ],
    ['故障录', {t: '压力容器事故、故障情况记录', }, ],
    ['操作规', {t: '操作规程',  } ],
    ['铭牌', {t: '铭牌、漆色、特种设备使用标志', pr: '容器本体及运行情况', span: 5,}],
    ['接头陷', {t: '本体、接口（阀门、管路)部位、焊接（粘接）接头缺陷情况检查', }],
    ['外面腐', {t: '外表面腐蚀、结霜、结露情况检查', }],
    ['隔热', {t: '隔热层检査', }],
    ['信号孔', {t: '检漏孔、信号孔检查', }],
    ['异常振', {t: '压力容器与相邻管道或者构件异常振动、响声或者相互摩擦情况检查', pr: '容器本体及运行情况', span: 7, } ],
    ['支承座', {t: '支承或者支座、基础、紧固螺栓检查',  }],
    ['排污装', {t: '排放（疏水、排污)装置检查', }],
    ['超压超', {t: '运行期间超压、超温、超量等情况检查', } ],
    ['接地', {t: '接地装置检查', } ],
    //【极度特殊】这里若配置 span: 0 表示td不拆分，但是前缀pr也可针对不同编辑器区域的，再做冗余设置；上面已配过的span横跨多个拆分的Rows部分,继承pr栏目列的span。
    //span=0 解析器代码版本不一样， u单位栏目的自动合并rowSpan的解析器代码版本有稍微的不同： 还没有融合加参数逻辑的？。
    ['监控实', {t: '监控措施是否有效实施情况检查',  }, ],
    ['员持证', {t: '快开门式压力容器作业人员持证情况' }],
    ['安全阀', {t: '安全阀',  pr: '安全附件', span: 4}],
    ['爆破片', {t: '爆破片装置',  }],
    ['联锁装', {t: '安全联锁装置' }, ],
    ['压力表', {t: '压力表',  }],
    ['液位计', {t: '液位计', pr: '安全附件', span: 4 }],
    ['测温仪', {t: '测温仪表',  }],
    ['导静电', {t: '导静电装置', }],
    ['急切断', {t: '紧急切断装置', }],
    // ['宏其他', { }, true]
];

export const itemA工作内容: string[] = [ ];
items工作内容.forEach(([name, title, initIsp], i: number) => {
    itemA工作内容.push(name as string);
});
export const 检验结果选=['√','○','×','无此项'];
interface Props extends InternalItemProps {
    label?: string;
    titles?: any[];
    //拆分的标签号码； 序号，以0为起点
    part: number;
}

const fixedFrom=[0,15];
const fixedTo=[15,30];
/**监检工作内容和检验结果报告 : 按part参数 拆成形成 三个编辑器区域；标题叙述：1-11' 12-21' 22-28' 【注意】配置地一致性要和报告的拆分统一split:[10,20] 。
 * 对应报告JobResponsibiliVw组件。
 * */
export const AttachInspectItems =
    React.forwardRef((
        {children, show, alone = true, redId, nestMd, label, part}: Props, ref
    ) => {
        const [getInpFilter] = useMeasureInpFilter(null, itemA工作内容,);
        const {inp, setInp} = useItemInputControl({ref});
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text>{label}：</Text>
            <ASplitContent inp={inp} setInp={setInp} from={fixedFrom[part]} to={fixedTo[part]}/>
        </InspectRecordLayout>;
    });

interface ASplitContentProps extends InternalItemProps {
    inp: any,
    setInp: Dispatch<SetStateAction<any>>,
    /**起点的所索引号 0开*/
    from: number;
    /**不包含这最后一个的*/
    to: number;
}
/**还是抽取出 可公用的代码为好。 可支持加hook的。
 * 【特别地】底下”确认日期“ 是增强形式：两个基础组件合并输出，被看作同一个组件地用法。
 * */
const ASplitContent= ({inp, setInp,from,to} : ASplitContentProps
) => {
    let oldPrefic='';
    let oldunit='';
    return <>
        { items工作内容.map(([name,conf,adddesc]: any, i:number) => {
            if(i<from || i>=to)  return null;
            const {t: title, pr: prefix, span,u:unit}=conf;
            oldPrefic=prefix===null? '' : prefix? prefix:oldPrefic;             //配置可继承性
            oldunit=unit===null? '' : unit? unit:oldunit;
            return (<React.Fragment key={i}>
                <div css={{display: 'flex',flexWrap:'wrap',alignItems:'center'}}>
                    <Text>项目{i+1} - {oldPrefic} {'>'} {title}：</Text>
                    {adddesc && <InputLine  label={'增加的项目'}>
                        <Input value={inp?.[name]?.a || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                               onChange={e => objNestSet(name,'a', e.currentTarget.value||undefined,inp,setInp) }/>
                    </InputLine>
                    }
                    &nbsp;检查结果
                    <InputIdProvider>
                        <InputDatalist value={(inp?.[name]?.r) || ''} datalist={检验结果选}
                                       style={{display: 'inline-flex', width: '10rem'}}
                                       onListChange={v => objNestSet(name,'r', v||undefined,inp,setInp) } />
                    </InputIdProvider>
                    &nbsp;备注
                    <InputDatalist value={(inp?.[name]?.m) || ''}
                                   style={{display: 'inline-flex', width: '14rem'}}
                                   onListChange={v => objNestSet(name,'m', v||undefined,inp,setInp) } />

                </div>
            </React.Fragment>);
        })}
        <hr/>
        注：无问题或者合格的检查项目在检查结果栏打“√”；检验项目存在一般问题在检查结果栏打“○”；检验项目存在严重问题，单项结论为“不符合要求”或“不合格”在检查结果栏打“×”，并且在备注中说明；实际没有的检查项目在
        检查结果栏填写“无此项”或划“/”，或者按照实际的检查项目编制；无法检查的项目在检查结果栏中划“一”，并且在备注栏中说明原因。
    </>;
};


/*【增强日期输入】
    &nbsp;确认日期
    <Input  value={inp?.[name]?.d ||''}  type='date' style={{display: 'inline-flex', width: '2.5rem'}}
            onChange={e =>objNestSet(name,'d', e.currentTarget.value,inp,setInp)} />
    <BlobInputList  value={inp?.[name]?.d ||''} datalist={[]}
                    style={{display: 'inline-flex', width: '12rem'}}  rows={1}
                    onListChange={v => objNestSet(name,'d', v||undefined,inp,setInp) } />
* */
